<template>
  <div class="pic">
    <el-container>
      <el-header>
        <!-- 下拉菜单 -->
        <el-select v-model="sort" placeholder="请选择">
          <el-option value="asc">升序</el-option>
          <el-option value="desc">降序</el-option>
        </el-select>
        <!-- 搜索 -->
        <el-input
          v-model="keyword"
          placeholder="请输入图片名称"
          style="width: 300px; margin-left: 20px"
        ></el-input>
        <el-button
          type="success"
          style="margin: 10px 0; margin-left: 10px"
          @click="getImage"
          >搜索</el-button
        >
        <el-button type="primary" style="margin: 10px 0; margin-left: 40px;" v-show="ids.length > 0" @click="selectdel">选中删除</el-button>
        <!-- 创建相册 -->
        <el-button
          type="success"
          style="margin: 10px 0; margin-left: 40px"
          @click="classForm = true"
          >创建相册</el-button
        >
        <!-- 上传图片 -->
        <el-button
          type="warning"
          style="margin: 10px 0; margin-left: 10px"
          @click="uploadfrom = true"
          >上传图片</el-button
        >
      </el-header>
      <el-container>
        <!-- 侧边栏 -->
        <el-aside width="200px">
          <ul>
            <li v-for="item in list" :key="item.id" @click="getid(item.id)">
              <span>{{ item.name }}</span>
              <el-dropdown>
                <span class="el-dropdown-link">
                  {{ item.images_count }}<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu>
                  <el-dropdown-item @click.native="editImgclass(item)"
                    >修改</el-dropdown-item
                  >
                  <el-dropdown-item @click.native="delImgclass(item.id)"
                    >删除</el-dropdown-item
                  >
                </el-dropdown-menu>
              </el-dropdown>
            </li>
          </ul>
        </el-aside>
        <el-container>
          <el-main>
            <!-- 图片列表 -->
            <el-row>
              <el-col :span="4" v-for="(o, index) in pics" :key="index">
                <el-card :body-style="{ padding: '0px' }">
                  <el-image
                    :src="o.url"
                    class="image"
                    style="width: 100%; height: 150px"
                    :preview-src-list="[o.url]"
                  />
                  <span>{{ o.name }}</span>
                  <div class="bottom clearfix">
                    <input type="checkbox" v-model="ids" :value="o.id"/>
                    <el-button
                      type="text"
                      class="button"
                      icon="el-icon-edit"
                      @click="changename(o)"
                    ></el-button>
                    <el-button
                      type="text"
                      class="button"
                      icon="el-icon-delete"
                      @click="delpic(o.id)"
                    ></el-button>
                  </div>
                </el-card>
              </el-col>
            </el-row>
            <!-- 创建相册模态框 -->
            <el-dialog title="创建相册" :visible.sync="classForm">
              <el-form :model="form">
                <el-form-item
                  label="相册名称"
                  :label-width="'80px'"
                  placeholder="请输入相册名称"
                >
                  <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="排序 ">
                  <el-input-number
                    v-model="form.order"
                    label="相册排序"
                  ></el-input-number>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="classForm = false">取 消</el-button>
                <el-button type="primary" @click="addclass">确 定</el-button>
              </div>
            </el-dialog>
            <!-- 修改相册名称模态框 -->
            <el-dialog title="更改相册名称" :visible.sync="imgForm">
              <el-form :model="editFrom">
                <el-form-item
                  label="相册名称"
                  :label-width="'80px'"
                  placeholder="请输入相册名称"
                >
                  <el-input v-model="editFrom.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="排序 ">
                  <el-input-number
                    v-model="editFrom.order"
                    label="相册排序"
                  ></el-input-number>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="imgForm = false">取 消</el-button>
                <el-button type="primary" @click="addImg">确 定</el-button>
              </div>
            </el-dialog>
            <!-- 修改图片名称模态框 -->
            <el-dialog title="更改名字名称" :visible.sync="editpic">
              <el-form>
                <el-form-item
                  label="相册名称"
                  :label-width="'80px'"
                  placeholder="请输入相册名称"
                >
                  <el-input v-model="name" autocomplete="off"></el-input>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="editpic = false">取 消</el-button>
                <el-button type="primary" @click="editpicname">确 定</el-button>
              </div>
            </el-dialog>
            <!-- 上传图片的模态框 -->
            <el-dialog title="上传图片" :visible.sync="uploadfrom" @close="getImage">
              <el-upload
                class="upload-demo"
                drag
                :data="{ image_class_id: id }"
                action="/admin/image/upload"
                name="img"
                multiple
                :headers="{ token: $store.state.token }"
              >
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip" slot="tip">
                  只能上传jpg/png文件，且不超过500kb
                </div>
              </el-upload>
            </el-dialog>
          </el-main>
          <el-footer>
            <!-- 分页 -->
            <el-pagination
              @size-change="changeSize"
              @current-change="changePage"
              :current-page="page"
              :page-sizes="[2, 4, 6, 8]"
              :page-size="limit"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            >
            </el-pagination>
          </el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      sort: "",
      value: "",
      limit: 2,
      order: "",
      list: [], // 左侧侧边栏的数据
      pics: [], //图片列表数据
      page: 1, //当前页
      total: 0,
      id: "",
      keyword: "",
      // 相册表单数据
      classForm: false, //控制显示隐藏
      form: {
        name: "", //name值
        order: 0, //控制排序
      },
      // 更改相册名称数据
      imgForm: false, //控制显示隐藏
      editFrom: {
        name: "",
        order: "",
      },
      // 修改图片名称
      editpic: false,
      name: "",
      cid: "", //相册分类id
      ids:[], //选中图片的id
      // 上传图片
      uploadfrom: false,
    };
  },
  created() {},
  mounted() {
    this.getaside();
    // this.getImage();
  },
  methods: {
    // 侧边栏数据
    getaside() {
      this.$axios.get(`/admin/imageclass/${this.page}?limit=`).then((res) => {
        // console.log(res);
        this.list = res.data.list;
        this.id = res.data.list[0].id;
        this.getImage();
        // console.log(this.id);
      });
    },
    // 图片列表数据
    getImage() {
      this.$axios
        .get(
          `/admin/imageclass/${this.id}/image/${this.page}?limit=${this.limit}&order=${this.order}&keyword=${this.keyword}`
        )
        .then((res) => {
          // console.log(res);
          this.pics = res.data.list;
          this.total = res.data.totalCount;
        });
    },
    // 点击切换侧边栏
    getid(id) {
      console.log(id);
      this.id = id;
      this.getImage();
    },  
    // 每页显示条数
    changeSize(size) {
      this.limit = size;
      console.log(size);
      this.getImage();
    },
    // 当前页
    changePage(page) {
      console.log(page);
      this.page = page;
      this.getImage();
    },
    // 创建相册
    addclass() {
      this.$axios.post("/admin/imageclass", this.form).then((res) => {
        console.log(res);
        if (res.msg == "ok") {
          alert("相册创建成功");
        }
        this.classForm = false;
        this.getaside();
      });
    },
    // 删除相册
    delImgclass(id) {
      // alert(id)
      this.$axios.delete(`/admin/imageclass/${id}`).then((res) => {
        console.log(res);
        if (res.msg == "ok") {
          alert("删除成功");
          this.getaside();
        }
      });
    },
    // 修改左侧相册名称
    editImgclass(info) {
      // alert(id);
      this.editFrom = info;
      this.imgForm = true;
      this.id = info.id;
    },
    addImg() {
      this.$axios.post(`/admin/imageclass/${this.id}`, this.editFrom).then((res) => {
        if (res.msg == "ok") {
          alert("修改成功");
        }
        this.getaside();
      });
      this.imgForm = false;
    },
    // 更改照片名称,回显
    changename(info) {
      console.log(info);
      this.editpic = true;
      this.name = info.name;
      this.cid = info.id;
    },
    // 修改照片名字，请求接口
    editpicname() {
      console.log(this.cid);
      this.$axios
        .post(`/admin/image/${this.cid}?name=${this.name}`)
        .then((res) => {
          // console.log(res)
          if (res.mag == "ok") {
            alert("修改成功");
          }
          this.editpic = false;
          this.getImage();
        })
        .catch((error) => {
          console.log(error.response.data);
        });
    },
    // 删除图片
    delpic(index) {
      console.log(index);
      this.$axios.delete(`/admin/image/${index}`).then((res) => {
        this.getImage();
      });
    },
    // 选中删除
    selectdel(){
      this.$axios.post('/admin/image/delete_all',{ids:this.ids}).then((res)=>{
        console.log(res)
        this.$message.success('删除图片成功')
        this.getImage();
      }).catch(()=>{

      })
    },
  },
  computed: {},
};
</script>

<style scoped lang="scss">
.pic {
  width: 100%;
  height: 94%;
  display: flex;
}
.el-header,
.el-footer {
  width: 100%;
  color: #333;
  line-height: 60px;
  display: flex;
  border-bottom: 1px solid #ddd;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  height: 100%;
  overflow: auto;
  width: 100%;
  ul {
    width: 100%;
    padding: 0 10px;
    overflow: auto;
    li {
      width: 100%;
      height: 50px;
      line-height: 50px;
      border-bottom: 1px solid #ccc;
      display: flex;
      justify-content: space-between;
      cursor: pointer;
    }
  }
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  line-height: 160px;
}
.el-dropdown-link {
  cursor: pointer;
}
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  line-height: 12px;
}

.button {
  padding: 0;
  float: left;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
</style>
